
<html>
	<head>
		<title>City 0.1</title>
		<style>
			body {
				background-color: #d8e7ff;
				font-family: Monospace;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src='three.js/build/three.min.js'></script>
		<script type="text/javascript" src="three.js/OrbitControls.js"></script>
		<script src="three.js/WebVR.js"></script>
		<script src="three.js/VRControls.js"></script>
		<script src="three.js/VREffect.js"></script>
		<script src="three.js/webvr-polyfill.js"></script>
		<script>
			if ( WEBVR.isLatestAvailable() === false ) {

				document.body.appendChild( WEBVR.getMessage() );

			}
			var camera, scene, renderer;
			renderer = new THREE.WebGLRenderer( { antialias: false } );
			renderer.setClearColor( 0xd8e7ff );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 110 );
			camera.layers.enable( 1 );

			scene = new THREE.Scene();

			var controls = new THREE.VRControls( camera );
			var effect = new THREE.VREffect( renderer );
			effect.setSize(window.innerWidth, window.innerHeight);

			var textureLoader = new THREE.TextureLoader();
			var path = "./ForbiddenCity/";//nature 可以修改为不同文件夹下的纹理
			var format = '.jpg';
			var texture0 = textureLoader.load( path + 'posx' + format );
			var texture1 = textureLoader.load( path + 'negx' + format );
			var texture2 = textureLoader.load( path + 'posy' + format );
			var texture3 = textureLoader.load( path + 'negy' + format );
			var texture4 = textureLoader.load( path + 'posz' + format );
			var texture5 = textureLoader.load( path + 'negz' + format );

			var materials = [
				new THREE.MeshBasicMaterial( { map: texture0,side: THREE.BackSide } ),
				new THREE.MeshBasicMaterial( { map: texture1,side: THREE.BackSide } ),
				new THREE.MeshBasicMaterial( { map: texture2,side: THREE.BackSide } ),
				new THREE.MeshBasicMaterial( { map: texture3,side: THREE.BackSide } ),
				new THREE.MeshBasicMaterial( { map: texture4,side: THREE.BackSide } ),
				new THREE.MeshBasicMaterial( { map: texture5,side: THREE.BackSide } )
			];
			var faceMaterial = new THREE.MeshFaceMaterial( materials );

			var urls = [
				'./ForbiddenCity/posx.jpg',
				'./ForbiddenCity/negx.jpg',
				'./ForbiddenCity/posy.jpg',
				'./ForbiddenCity/negy.jpg',
				'./ForbiddenCity/posz.jpg',
				'./ForbiddenCity/negz.jpg'
			];

			// wrap it up into the object that we need
			var cubemap = THREE.ImageUtils.loadTextureCube(urls);

			// set the format, likely RGB
			// unless you've gone crazy
			cubemap.format = THREE.RGBFormat;

			// following code from https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cubemap.html
			var shader = THREE.ShaderLib[ "cube" ];
			shader.uniforms[ "tCube" ].texture = cubemap;

			var material = new THREE.ShaderMaterial( {

				fragmentShader: shader.fragmentShader,
				vertexShader: shader.vertexShader,
				uniforms: shader.uniforms,
				depthWrite: false,
				side: THREE.BackSide

			});
			
			var geometry = new THREE.BoxGeometry( 20, 20, 20 );

			var boxMesh = new THREE.Mesh(geometry, material);
			//scene.add(boxMesh);

			//CUBIC MAP SETUP
			urlPrefix = "./ForbiddenCity/";
			var format = ".jpg";
			urls = [ urlPrefix + "posx"+format, urlPrefix + "negx"+format,
				urlPrefix + "posy"+format, urlPrefix + "negy"+format,
				urlPrefix + "posz"+format, urlPrefix + "negz"+format];

			//LOAD CUBIC MAP IMAGE TO SKYBOX
			var loader = new THREE.CubeTextureLoader();
			textureCube = loader.load( urls );

			//ADD THE CAMERA AND SKYBOX TEXTURE TO THE SCENE
			scene.background = textureCube;



			//VR polyfill start
			// Get the VRDisplay and save it for later.
			var vrDisplay = null;
			navigator.getVRDisplays().then(function(displays) {
				if (displays.length > 0) {
					vrDisplay = displays[0];
					// Kick off the render loop.
					vrDisplay.requestAnimationFrame(animate);
				}
			});

			// Request animation frame loop function
			var lastRender = 0;
			function animate(timestamp) {
				var delta = Math.min(timestamp - lastRender, 500);
				lastRender = timestamp;
				// Apply rotation to cube mesh
				//cube.rotation.y += delta * 0.0006;
				// Update VR headset position and apply to camera.
				controls.update();
				// Render the scene.
				effect.render(scene, camera);
				// Keep looping.
				vrDisplay.requestAnimationFrame(animate);
			}
		</script>
	</body>
</html>